<script setup lang="ts">
// 系统管理
import {useRoute} from 'vue-router';
import {onMounted, ref} from "vue";
import {getMenuSubListByRemarkApi} from "@/assets/api/systemManagement/system/menuSub";
import {ElMessage} from "element-plus";
import router from "@/router";
import type {Menu} from "@/components/interface/system/menu";
import {useCookies} from "vue3-cookies";

const {cookies} = useCookies();
const route = useRoute()

// 根据菜单id获取菜单子表
const menuList = ref()
// 获取菜单列表
const getList = () => {
  const remark = cookies.get("urlRemark")
  if (remark === undefined || remark === null) {
    ElMessage.error({message: "菜单关联标识不能为空", showClose: true})
    return;
  }
  getMenuSubListByRemarkApi(remark + '').then((res) => {
    if (res.data.code !== 200) {
      ElMessage.error(res.data.data)
      return;
    }
    menuList.value = res.data.data.list;
  });
};

// 根据菜单跳转
const toOpenPage = (menu: Menu) => {
  if (menu.menuUrl == null || menu.menuUrl === '')
    return;
  router.push({
    path: menu.menuUrl,
    query: {
      menuId: route.query?.menuId
    }
  });
}

onMounted(() => {
  getList();
});
</script>

<template>
  <div class="app-container">
    <el-row class="app-container">
      <!-- 系统设置-菜单 -->
      <el-col class="menu-col" :span="3">
        <el-menu
          background-color="rgba(255, 255, 255,0)"
        >
          <!-- 是否存在子菜单校验 -->
          <template v-for="(menu,index) in menuList">
            <template v-if="menu.children.length === 0">
              <el-menu-item
                :index="(index+1)+''"
                @click="toOpenPage(menu)"
              >
                <span>{{ menu.name }}</span>
              </el-menu-item>
            </template>
            <template v-else>
              <el-sub-menu :index="(index+1)+''">
                <template #title>
                  <span>{{ menu.name }}</span>
                </template>
                <el-menu-item style="color: #5c5c5c" v-for="(child,i) in menu.children"
                              :index="(index+1)+'-'+(i+1)"
                              @click="toOpenPage(child)">
                  {{ child.name }}
                </el-menu-item>
              </el-sub-menu>
            </template>
          </template>
        </el-menu>
      </el-col>
      <!-- 系统设置-内容 -->
      <el-col class="content-col" :span="21">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.app-container {
  width: 100%;
  height: 100%;
}

.menu-col {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.content-col {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  overflow: auto;
}
</style>
